/* pages/work-order/index/index.wxss */
.workOrderPage {
    background: #f8f9fa;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.woHeader {
    height: 414rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    box-sizing: border-box;
    padding-left: 48rpx;
    background: #3c7ede;

    .topBg {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;

        .topImg {
            width: 100%;
        }
    }

    .searchBar,
    .title,
    .cateList {
        position: relative;
    }

    .searchBar {
        display: flex;
        gap: 20rpx;
    }

    .messageIcon {
        position: relative;
        height: 56rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .iconfont {
            font-size: 48rpx;
            color: #fff;
        }

        .badge {
            width: 24rpx;
            height: 24rpx;
            background: #D92400;
            border-radius: 12rpx;
            position: absolute;
            right: -6rpx;
            top: -6rpx;
        }
    }

    .inputBox {
        background: rgba(255, 255, 255, .26);
        height: 56rpx;
        width: 422rpx;
        position: relative;
        border-radius: 6rpx;

        .icon-search {
            position: absolute;
            right: 0;
            top: 0;
            color: #fff;
            font-size: 32rpx;
            width: 56rpx;
            height: 56rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .input {
            height: 56rpx;
            font-size: 24rpx;
            padding: 0 20rpx;
            color: #fff;
        }
    }

    .title {
        font-size: 72rpx;
        font-weight: 600;
        display: flex;
        color: #fff;
        gap: 24rpx;
        line-height: 1em;

        .iconfont {
            font-size: 72rpx;
            line-height: 1em;
            font-weight: lighter;
        }
    }

    .cateList {
        padding-right: 48rpx;

        .list {
            display: flex;

            .item {
                flex-grow: 1;
                text-align: center;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                gap: 12rpx;
                color: #fff;
                font-size: 24rpx;
                border-bottom: 4rpx transparent solid;
                transform: translateY(1px);
                position: relative;

                &.active {
                    border-bottom: #fff 8rpx solid;

                    .name {
                        font-size: 36rpx;
                        font-weight: 600;
                    }

                    .value {
                        font-size: 28rpx;
                        font-weight: 600;
                    }
                }
            }
        }
    }
}

.woMain {
    flex-grow: 1;
    overflow: hidden;
    height: 0;
}

.orderList {
    padding: 0 24rpx 100rpx 24rpx;

    .item {
        .content {
            background: #fff;
            font-size: 24rpx;
            padding: 24rpx;
            position: relative;
            .circle{
                width: 140rpx;
                height: 140rpx;
                font-size: 48rpx;
                border-radius: 50%;
                border: #f3f3f3 10rpx solid;
                position: absolute;
                bottom: 120rpx;
                right: 20rpx;
                color: #f3f3f3;
                line-height: 140rpx;
                text-align: center;
                transform: rotate(-25deg);
                pointer-events: none;
            }
        }

        .time {
            font-size: 24rpx;
            color: #adb5bd;
            line-height: 42rpx;
            display: flex;
            gap: 24rpx;
            padding: 24rpx 0;
            position: relative;

            &::before {
                width: 2rpx;
                background: #EDEEF0;
                height: 100%;
                content: '';
                display: block;
                position: absolute;
                left: 18rpx;
                top: 0;
            }

            .dayName {
                font-size: 32rpx;
                color: #058AFF;
                font-weight: 600;
            }

            .dot {
                background: #C8E2FE;
                width: 40rpx;
                height: 40rpx;
                border-radius: 20rpx;
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: center;

                &::before {
                    content: '';
                    display: block;
                    width: 16rpx;
                    height: 16rpx;
                    border-radius: 8rpx;
                    background: #058AFF;
                    margin: 0 auto;
                }
            }
        }
    }

    .item:first-of-type .time {
        &::before {
            height: 50%;
            top: 50%;
        }

        .dayName {
            color: #f9a825;
        }

        .dot {
            background: #ede5d5;

            &::before {
                background: #f9a825;
            }
        }
    }

    .locationInfo {
        display: flex;
        justify-content: space-between;
        height: 24rpx;
        line-height: 24rpx;

        .left {
            display: flex;
            gap: 32rpx;
        }

        .distance {
            font-size: 16rpx;
            background: #d3f4f8;
            color: #3b8ffd;
        }

        .remainingTime {
            color: #f9a825;

            .iconfont {
                font-size: 26rpx;
                padding-right: 6rpx;
            }
        }

        .right .iconfont {
            color: #058AFF;
            font-size: 32rpx;
            background: #f8f9fa;
            width: 52rpx;
            height: 52rpx;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-radius: 50%;
        }
    }

    .titleLine {
        padding: 24rpx 0;
        display: flex;
        height: 32rpx;
        line-height: 32rpx;
        gap: 24rpx;

        .title {
            font-size: 32rpx;
            font-weight: 600;
        }

        .icons {
            color: #058AFF;
            display: flex;
            gap: 14rpx;
            font-size: 36rpx;
        }
    }

    .description {
        padding: 10rpx 0;
    }

    .creator,
    .executor {
        color: #adb5bd;
        padding: 10rpx 0;
    }

    .statusList {
        display: flex;
        padding-top: 24rpx;

        .subItem {
            flex-grow: 1;
            text-align: center;
            padding-top: 40rpx;
            border-top: #f3f3f3 1px solid;
            position: relative;

            &::before {
                content: '';
                display: block;
                width: 18rpx;
                height: 18rpx;
                background: #058AFF;
                position: absolute;
                top: -9rpx;
                left: calc(50% - 9rpx);
                border-radius: 50%;
            }
        }
    }
}